<!--抽屉IFrame-->

<template>
  <div class="w-h-full iview-drawer-comp">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <PnDrawer v-model="visible"
              :title="component.compConfigData.drawerConfig.title"
              :width="component.compConfigData.drawerConfig.width"
              :closable="component.compConfigData.drawerConfig.closable"
              :mask-closable="component.compConfigData.drawerConfig.maskClosable"
              :mask="component.compConfigData.drawerConfig.mask"
              :placement="component.compConfigData.drawerConfig.placement"
              :transfer="component.compConfigData.drawerConfig.transfer"
              :draggable="component.compConfigData.drawerConfig.draggable">
      <iframe ref="iframe"
              :name="component.compConfigData.iframeConfig.name"
              :src="runCustomFilter(component.compConfigData.ds_resultObj)[0].src"
              :width="'100%'"
              :height="'100%'"
              :frameborder="0"
              :scrolling="component.compConfigData.iframeConfig.scrolling"></iframe>
    </PnDrawer>

    <div class="toolbar">
      <p style="font-size: 20px; line-height: 30px;">抽屉式IFrame</p>
      <Button type="primary" size="large" @click="openDrawer">打开抽屉</Button>
    </div>

  </div>
</template>

<script>

import FuncCompMixin from '@/mixin/FuncCompMixin'
import PnDesigner from '@/utils/PnDesigner'

const _this = {
  name: 'IViewDrawerComp', // 此名称必须填写，且必须与组件文件名相同
  mixins: [FuncCompMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      // 组件相关配置属性
      drawerConfig: {
        title: '抽屉IFrame',
        width: '1024',
        closable: true,
        maskClosable: true,
        mask: true,
        placement: 'right',
        transfer: true,
        draggable: true,
        footer: {
          show: false
        },
        onCloseCode: ''
      },

      iframeConfig: {
        scrolling: 'auto',
        name: '',
      }

    }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
      ds_resultObjTemplate: [
        {
          field: 'src',
          mappingField: '',
          remark: '链接地址'
        }
      ],
      ds_resultObj: [
        {
          "src": ""
        }
      ],
      ds_useFilter: true, // 是否使用过滤器，默认不使用
      ds_useTimer: false, // 是否开启定时器配置，默认不开启
    }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
  },
  data() {
    return {
      visible: false
    }
  },
  mounted() {
    this.init();

  },
  methods: {
    init() { // 组价初始化函数，函数名必须使用init，不可更改
      this.initDatasource(() => {
        this.runCustomGlobalJsCode()
      }, (result) => {
        this.runCustomGlobalJsCode()
      });
    },

    openDrawer() {
      this.visible = true
    },

    onCloseHandler() {
      try {
        eval(this.component.compConfigData.drawerConfig.onCloseCode)
      }catch (e) {
        console.error(e)
      }
    }
  },
  computed: {}
};

export default _this
</script>

<style scoped>
>>> .ivu-drawer-body {
  overflow: hidden;
}
</style>

<style lang="less" scoped>
.iview-drawer-comp {
  position: relative;

  .toolbar {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }
}

</style>
